import React,{Component} from 'react';
import {
  Link
} from 'react-router-dom';
import { getUserAddressDetail, editUserAddress, getAreaInfo, deleteUserAddress } from 'api/user.js';
import { message } from 'antd';
import './editAddress.scss';
export default class Editddress extends Component{
	constructor (props) {
		super(props)
		this.state={
			user_address_id:'',
			user_address_area:'',
			user_address_address:'',
			user_address_phone:'',
			user_address_contact:'',
			user_address_default:'',
			adr:'glyphicon-nochecked',
    	color:'',
    	province_id:'',
  		city_id:'',
  		township_id:'',
  		pr_id:'',
    	ci_id:'',
    	to_id:'',
    	color1:'color',
    	color2:'',
    	color3:'',
    	hide:'card_hide',
    	pid:0,
    	address:[],
    	addr_name:'请选择 所在省 所在市 所在区',
    	province: '请选择',
    	city: '',
    	township: '',
    	num:'card_hide'
		}
	}
	show = () => {
  	this.setState({
  		hide:''
  	})
  }
  hide = () => {
  	this.setState({
  		hide:'card_hide',
  		user_address_area:this.state.province+this.state.city+this.state.township
  	})
  }
	_setDefaultAddress = () => { //用户设置默认收货地址接口
		if(this.state.color=== 'active'){
			this.setState({
				is_default:1
			}, ()=>{
				this._editUserAddress()
			})
		} else {
			this.setState({
				is_default:0
			}, ()=>{
				this._editUserAddress()
			})
		}
	}
	handleChange = (e) => {
    let key = e.target.name
    this.setState({[key]: e.target.value})
  }
  _editUserAddress = () => { //用户编辑收货地址接口
  	editUserAddress({
  		address_id:this.props.location.state.id,
  		detail_area:this.state.user_address_address,
  		province_id:this.state.province_id,
  		city_id:this.state.city_id,
  		township_id:this.state.township_id,
  		phone:this.state.user_address_phone,
  		contact_name:this.state.user_address_contact,
  		is_default:this.state.is_default
  	}).then(res => {
			if (res.code === 1) {
				message.success('修改成功！', 3, this.props.history.push('/user/shipAddress'))
			}
		})
  }
  click = () => {
		this.setState({
			// adr:this.state.adr==='glyphicon-nochecked' ? 'glyphicon-checked active' : 'glyphicon-nochecked',
			// color:this.state.color=== '' ? 'active' : ''
			adr: 'glyphicon-checked active',
			color: 'active'
		})
	}
	click1 = () => {
		console.log(this.state.num)
		this.setState({
			num: 'card_hide'
		})
	}
	showdel = () => {
		console.log(this.state.num)
		this.setState({
			num: ''
		})
	}
	_getAreaInfo (id,name,tier,pa_id) { //获取地区信息接口
		getAreaInfo({
			pid:id
		}).then(res => {
      if (res.code === 1) {
        this.setState({
          address: res.data.info,
          has: res.data.has_last
        })
      }
    })
    	if(tier===1){
	    	this.setState({
		    	province:name,
		    	pr_id:pa_id,
		    	city: '请选择',
		    	color1: '',
		    	color2: 'color',
		    	province_id:id
		    })
	    }else if(tier===2){
	    	this.setState({
		    	city:name,
		    	ci_id:pa_id,
		    	township: this.state.has ? '请选择' : '',
		    	color2: '',
		    	color3: 'color',
		    	city_id:id
		    })
		  }else if(tier===3 ){
		  	this.setState({
		    	township:name,
		    	to_id:pa_id,
		    	color3: '',
		    	township_id:id
		    })
		  }
	}
	change (sum) { //
		getAreaInfo({
			pid:sum
		}).then(res => {
      if (res.code === 1) {
      	 this.setState({
          address: res.data.info,
          has: res.data.has_last
        })
      }
		})
	}
	_deleteUserAddress = () => { //用户删除收货地址接口
		deleteUserAddress({
			address_id:this.props.location.state.id
		}).then(res =>{
			if (res.code === 1) {
				this.setState({
					num:'card_hiden'
				})
				message.success('删除成功！', 3, this.props.history.push('/user/shipAddress'))
      }
		})
	}
	
	componentWillMount () {
		getUserAddressDetail({ //用户收货地址列表接口
			address_id:this.props.location.state.id
		}).then(res => {
			if (res.code === 1) {
				this.setState({
					user_address_id:res.data.user_address_id,
					user_address_area:res.data.user_address_area,
					user_address_address:res.data.user_address_address,
					user_address_phone:res.data.user_address_phone,
					user_address_contact:res.data.user_address_contact,
					user_address_default:res.data.user_address_default,
					province_id:res.data.user_address_province_id,
		  		city_id:res.data.user_address_city_id,
		  		township_id:res.data.user_address_area_id
				})
				if(res.data.user_address_default===1){
					this.setState({
						adr: 'glyphicon-checked active',
						color: 'active'
					})
				}
      }
		})
		this._getAreaInfo();
	}
	render(){
		return(
			<div>
				<div className="edit">
					<Link to='/user/shipAddress'><span className="glyphicon glyphicon-back back"></span></Link>
					<div className="log_title">管理收货地址</div>
				</div>
				<div className="address_content">
					<p onClick={this.show}><span className="glyphicon glyphicon-address xz"></span>{this.state.user_address_area}<span className="glyphicon glyphicon-right xz1"></span></p>
					<p><span>详细地址：</span><input type="text" placeholder="请输入详细地址" name="user_address_address" value={this.state.user_address_address} onChange={this.handleChange}/></p>
					<p><span>收件人：</span><input type="text" placeholder="请输入姓名" name="user_address_contact" value={this.state.user_address_contact} onChange={this.handleChange}/></p>
					<p><span>手机号：</span><input type="text" placeholder="请输入手机号" name="user_address_phone" value={this.state.user_address_phone} onChange={this.handleChange}/></p>
				</div>
				<div className="mr">
	        <p className={`glyphicon  ${this.state.adr}`}  onClick={this.click}></p><p className={this.state.color} onClick={this.click}>默认地址</p>
	      </div>
	      <div className="alter">
	      	<p onClick={this._setDefaultAddress}>保存修改</p>
	      	<p onClick={this.showdel}>删除收货地址</p>
	      </div>
	      <div className={`addr ${this.state.hide}`}>
					<div>
						<p>选择地址</p><span className="glyphicon glyphicon-closeaddr" onClick={this.hide}></span>
						<div className="address1">
							<span className={this.state.color1} onClick={this.change.bind(this,this.state.pr_id)}>{this.state.province}</span>
							<span className={this.state.color2} onClick={this.change.bind(this,this.state.ci_id)}>{this.state.city}</span>
							<span className={this.state.color3}>{this.state.township}</span>
						</div>
						<ul>
							{
								this.state.address.map((itme,index) => {
									return(
										<li key={index} onClick={this._getAreaInfo.bind(this,itme.district_id,itme.district_name,itme.district_is_leaf,itme.district_parent_id)}>{itme.district_name}</li>
									)
								})
							}
						</ul>
					</div>
				</div>
				<div className={`tanchu ${this.state.num}`}>
					<div>
						<p>确定要删除此收货地址吗？</p>
						<span onClick={this.click1}>取消</span><span onClick={this._deleteUserAddress}>确定</span>
					</div>
				</div>
			</div>
		)
	}
}